<!--
 * @Author: 矫建武 1452239416@qq.com
 * @Date: 2024-10-14 11:50:16
 * @LastEditTime: 2024-10-14 18:03:24
 * @FilePath: \tool\src\components\JsonEditor\index.vue
 * @Description: 
 * 
 * @file: https://github.com/OBKoro1/koro1FileHeader/wiki/%E5%AE%89%E8%A3%85%E5%92%8C%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B
-->
<!-- 模块说明 -->
<style lang="scss">
.JsonEditor {
  height: 100%;

  .jsoneditor-poweredBy {
    display: none;
  }
}
</style>
<template>
  <div class="JsonEditor">
    <JsonEditorVue v-model="data" style="height: 100%" :current-mode="props.currentMode" :options="props.options"
      :mode-list="props.modeList" @change="_change" :language="['cn']" />
  </div>
</template>

<script setup>
import JsonEditorVue from 'json-editor-vue3'
import { onMounted, defineProps, defineEmits, ref } from 'vue'
const emits = defineEmits(['change'])
const data = ref('')
const props = defineProps({
  options: {
    type: Object,
    default: () => ({})
  },
  currentMode: {
    type: String,
    default: 'code'
  },
  modeList: {
    type: Array,
    default: () => ['tree', 'code', 'form', 'text', 'view']
  }
})
const _change = (v) => {
  emits('change', v)
}

onMounted(() => {
  initStyle()
})

const initStyle = () => {
  const _format = document.querySelector('.jsoneditor-format')
  _format.title = '格式化JSON数据（Ctrl+I）'
  const _compact = document.querySelector('.jsoneditor-compact')
  _compact.title = '压缩JSON数据（Ctrl+Shift+I）'
}
</script>
